import {ItemBarInterface, TargetItemInfo,} from "../../interface/GuiInterface";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {FrameEvent, TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ItemDataKey, PlayerDataKey} from "../../../script/frame/dataSource/DataSource";
import {ColorStr} from "../../../script/type/Type";
import {ItemModel} from "../../../script/frame/apiModel/adapterModel/model3/ItemModel";
import {publicGui} from "../../interface/PublicGui";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";


export interface IProp {
    getItemsFun: (player: PlayerModel) => { items: ItemModel[], targetItemInfo: TargetItemInfo }
}
export interface IState {
    itemInfos: ItemModel[];
    targetItemInfo: TargetItemInfo;

    title: string;
    subTitle: string;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}

export default class ItemBar extends ItemBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);

        const itemItems: any[] = [];
        const maxItemNum = Configer.getConfig(ConfigKey.maxItemSlot);
        for (let i = 0; i < maxItemNum; i++) {
            itemItems.push({})
        }

        this.state = {
            itemInfos: itemItems,
            targetItemInfo: undefined,

            visible: true,
            infoVisible: false,
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        const itemItemBoard = Configer.getResource(ResourceKey.itemItemBoard);
        const skillItemBack = Configer.getResource(ResourceKey.skillItemBack)
        const disableBlp = Configer.getResource(ResourceKey.disableBlp)
        const itemSize = { h: 0.0567, w: 0.0312 }
        const maxItemNum = Configer.getConfig(ConfigKey.maxItemSlot);

        const backWidth = itemSize.w * ((maxItemNum / 2) + 1);

        const padding = { l: 0.001, t: 0.001 };
        const itemBackSize = { w: 0.029, h: 0.053 };
        const numSize = { w: 0.015, h: 0.015 };

        let x: number = 0;
        let y: number = 0;
        let targetIcon = ''
        const targetItemData = DataRouter.getItemDataByItemId(this.state.targetItemInfo?.id);
        if (targetItemData) {
            x = this.state.targetItemInfo.x - 0.05;
            y = this.state.targetItemInfo.y - 0.08;
            targetIcon = DataRouterUtil.getIconUrlByIconData(targetItemData);
        }
        // 0.850

        return <View key={GuiKeys.itemBar} style={{ width: backWidth, height: itemSize.h * 2, left: 0.796, top: 0.850 }}>
            {
                this.state.itemInfos.map((item: ItemModel, index) => {
                    // Logger.toastError(`${index}   index`)
                    let icon;
                    let num = 0;
                    let hidden = false;
                    let height = itemSize.h;
                    let useInterval = 0;

                    let cl = 0;

                    if (item.data[ItemDataKey.coolDown]) {
                        cl = item.data[ItemDataKey.coolDown];
                    }

                    let marginL = 0.01, marginT = 0;
                    const tempIndex = index + 1;
                    if (tempIndex % 3 === 1) {
                        marginL = 0;
                    }
                    if (tempIndex > 3) {
                        marginT = 0.01
                    }

                    if (!CodeUtil.isNullOrZero(item.strId)) {
                        num = item.charges;
                        const itemData = DataRouter.getItemDataByItemId(item.strId);
                        if (itemData) {
                            icon = DataRouterUtil.getIconUrlByIconData(itemData);
                            // icon = itemData.Art;

                            if (itemData.useInterval) {
                                useInterval = itemData.useInterval;
                            }
                        }
                    } else {
                        hidden = true;
                    }

                    if (cl > 0 && useInterval > 0) {
                        height = (height * cl) / useInterval;
                    } else {
                        height = 0.0001;
                    }

                    return <View   key={`${GuiKeys.itemBarItem}|${index}`} style={{ width: itemSize.w, height: itemSize.h, marginL: marginL, marginT: marginT }}>
                        <View   key={`${GuiKeys.itemBarItemBack}|${index}`} style={{ backgroundImage: skillItemBack, width: itemBackSize.w, height: itemBackSize.h, float: true, marginL: padding.l, marginT: padding.t }}></View>
                        <View   key={`${GuiKeys.itemBarFrame}|${index}`} style={{ hidden: hidden, backgroundImage: icon, width: itemBackSize.w, height: itemBackSize.h, float: true, marginL: padding.l, marginT: padding.t }}></View>
                        <View   key={`${GuiKeys.itemBarItemNum}|${index}`} style={{ hidden: (num && num === 0), backgroundImage: disableBlp, width: numSize.w, height: numSize.h, float: true, marginL: 0.015, marginT: 0.04, fontAlign: TextAlign.center, fontSize: 0.01 }}>{num}</View>
                        <View   key={`${GuiKeys.itemBarMask}|${index}`} style={{ backgroundImage: disableBlp, width: itemSize.w, height: height, float: true }}></View>
                        <View   key={`${GuiKeys.itemBarMaskKey}|${index}`} style={{ width: itemSize.w, height: itemSize.h, float: true, color: ColorStr.yellow, paddingL: 0.003 }}>{index + 1}</View>
                        <View   key={`${GuiKeys.itemBarImage}|${index}`}  stopEvent={true}  onMouseRightDown={(event) => { return this.rightClick(event, index) }} onMouseDown={(event)=> { return this.leftClick(event, index) }} onMouseEnter={(event) => { this.openInfo(item, event.x, event.y) }} onMouseLeave={() => {this.closeInfo()}}   style={{ backgroundImage: itemItemBoard, width: itemSize.w, height: itemSize.h, float: true }}></View>
                    </View>
                })
            }
            <View  key={`${GuiKeys.itemBarTargetItem}`} style={{ backgroundImage: targetIcon, width: itemBackSize.w, height: itemBackSize.h, left: x, top: y }}></View>
        </View>
    }

    rightClick = (event: FrameEvent, index: number) => {
        const syncData: UISyncData = { id: SyncId.setTargetItemByIndex, param: { index: index } };
        return syncData;
    }

    leftClick = (event: FrameEvent, index: number) => {
        const player = PlayerFactory.getInstance().getLocalPlayer();
        if (player?.data[PlayerDataKey.targetItem]) {
            const syncData: UISyncData = { id: SyncId.moveTargetItemIndex, param: { index: index } };
            return syncData;
        } else {
            const syncData: UISyncData = { id: SyncId.useItemByIndex, param: { index: index } };
            return syncData;
        }
    }

    openInfo = (item: ItemModel, x: number, y: number) => {
        // const template = item?.template
        // if (template) {
        //     const name = template.Name;
        //     let { subTitle, des } = DataRouterUtil.getItemInfoDes(item, this.state.lv);
        //     const fightValue = UnitUtil.getItemFightValue(template, item.affixs);
        //     const fightValueStr = CodeUtil.getColorStr(ColorStr.blue, '评分:' + fightValue)
        //     subTitle = fightValueStr + '\n' + subTitle + '\n';
        //     publicGui.showInfoPage(x - 0.3, y - 0.2, name, subTitle, des, InfoPageType.pos)
        // } else {
        //     publicGui.closeInfoPage();
        // }
    }

    closeInfo = () => {
        publicGui.closeInfoPage()
    }


    openBar= () => {
        const ret = this.props.getItemsFun(PlayerFactory.getInstance().getLocalPlayer())
        const itemInfos = ret.items;
        const targetItemInfo = ret.targetItemInfo;

        const itemItems: any[] = [];
        const maxItemNum = Configer.getConfig(ConfigKey.maxItemSlot);
        for (let i = 0; i < maxItemNum; i++) {
            const itemInfo = itemInfos[i];
            if (itemInfo) {
                itemItems.push(itemInfo)
            } else {
                itemItems.push({})
            }
        }

        this.setState({
            ... this.state,
            itemInfos: itemItems,
            targetItemInfo
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}